<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mine  - VR-IoT</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            transition: background-color 0.3s, color 0.3s;
            padding: 16px;
        }
        
        body.dark-theme {
            background-color: #1e1e1e;
            color: #e0e0e0;
        }
        
        .profile-header {
            text-align: center;
            padding: 24px 0;
            margin-bottom: 24px;
            border-radius: 12px;
            background: linear-gradient(135deg, #007bff, #00d4ff);
            color: white;
        }
        
        body.dark-theme .profile-header {
            background: linear-gradient(135deg, #1a237e, #3f51b5);
        }
        
        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: white;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
        }
        
        .username {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 8px;
        }
        
        .user-info {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .settings-section {
            background-color: white;
            border-radius: 12px;
            margin-bottom: 20px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        body.dark-theme .settings-section {
            background-color: #2d2d2d;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        
        .settings-item {
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        body.dark-theme .settings-item {
            border-bottom: 1px solid #444;
        }
        
        .settings-item:hover {
            background-color: #f8f9fa;
        }
        
        body.dark-theme .settings-item:hover {
            background-color: #3d3d3d;
        }
        
        .settings-item:last-child {
            border-bottom: none;
        }
        
        .settings-label {
            font-size: 16px;
        }
        
        .settings-value {
            color: #666;
            font-size: 14px;
        }
        
        body.dark-theme .settings-value {
            color: #aaa;
        }
        
        .toggle-switch {
            position: relative;
            width: 50px;
            height: 24px;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .toggle-slider {
            background-color: #007bff;
        }
        
        input:checked + .toggle-slider:before {
            transform: translateX(26px);
        }
        
        .version {
            text-align: center;
            padding: 20px 0;
            color: #999;
            font-size: 14px;
        }
        
        body.dark-theme .version {
            color: #666;
        }
    </style>
</head>
<body data-auto-init-sdk="true">
    <div class="profile-header">
        <div class="avatar">👤</div>
        <div class="username" data-i18n="mine.profile">用户昵称</div>
        <div class="user-info">VR-IoT 用户</div>
    </div>
    
    <div class="settings-section">
        <div class="settings-item" id="themeToggle">
            <span class="settings-label" data-i18n="mine.theme">深色模式</span>
            <label class="toggle-switch">
                <input type="checkbox" id="themeCheckbox">
                <span class="toggle-slider"></span>
            </label>
        </div>
        <div class="settings-item" id="languageToggle">
            <span class="settings-label" data-i18n="mine.language">语言</span>
            <span class="settings-value" id="currentLanguage"></span>
        </div>
    </div>
    
    <div class="settings-section">
        <div class="settings-item">
            <span class="settings-label" data-i18n="mine.notifications">通知设置</span>
            <span class="settings-value">></span>
        </div>
        <div class="settings-item">
            <span class="settings-label" data-i18n="mine.privacy">隐私设置</span>
            <span class="settings-value">></span>
        </div>
        <div class="settings-item">
            <span class="settings-label" data-i18n="mine.about">关于我们</span>
            <span class="settings-value">></span>
        </div>
    </div>
    
    <div class="version" data-i18n="mine.version">版本 1.0.0</div>
    
    <!-- 国际化支持 -->
        <script src="../../pwa-main/js/i18n.js"></script>
        <!-- 框架通信SDK -->
        <script src="../../pwa-main/js/frame-sdk.js"></script>
    <script>
        // 初始化变量
        let currentLang = 'zh-CN';
        let preloadSettings = null;
        
        // 监听预加载设置消息
        window.addEventListener('message', (event) => {
            if (event.data && event.data.type === 'PRELOAD_SETTINGS') {
                console.log('接收到预加载设置:', event.data.settings);
                preloadSettings = event.data.settings;
                
                // 如果i18n已经加载，立即应用预加载设置
                if (window.i18n && preloadSettings.language) {
                    currentLang = preloadSettings.language;
                    window.i18n.setLanguage(preloadSettings.language);
                }
            }
        }, { once: true });
        
        document.addEventListener('DOMContentLoaded', () => {
            // 使用全局frameSDK实例（已通过data-auto-init-sdk自动初始化）
            if (!window.frameSDK) {
                console.error('frameSDK is not initialized');
                return;
            }
            
            const themeCheckbox = document.getElementById('themeCheckbox');
            const languageToggle = document.getElementById('languageToggle');
            const currentLanguage = document.getElementById('currentLanguage');
            let currentTheme = 'light';
            
            // 应用预加载的语言设置
            if (preloadSettings && preloadSettings.language) {
                currentLang = preloadSettings.language;
                if (window.i18n) {
                    window.i18n.setLanguage(preloadSettings.language);
                }
            }
            
            // 设置页面标题
            if (window.i18n) {
                // document.title = i18n.t('mine.title');
                // alert(i18n.t('mine.title'));
            }
            
            // 主题切换
            themeCheckbox.addEventListener('change', () => {
                const newTheme = themeCheckbox.checked ? 'dark' : 'light';
                
                // 使用SDK发送主题变更
                window.frameSDK.changeTheme(newTheme);
            });
            
            // 语言选项定义
    const languages = [
        { code: 'zh-CN', name: '简体中文' },
        { code: 'en-US', name: 'English' },
        { code: 'ja-JP', name: '日本語' },
        { code: 'zh-TW', name: '繁體中文' }
    ];
            
            // 创建语言选择菜单
            let languageMenu = null;
            
            // 显示语言选择菜单
            const showLanguageMenu = () => {
                // 如果菜单已存在，移除它
                if (languageMenu) {
                    document.body.removeChild(languageMenu);
                    languageMenu = null;
                    return;
                }
                
                // 创建菜单元素
                languageMenu = document.createElement('div');
                languageMenu.className = 'language-menu';
                languageMenu.style.cssText = `
                    position: absolute;
                    top: 220px;
                    right: 20px;
                    background: ${currentTheme === 'dark' ? '#333' : '#fff'};
                    border: 1px solid #ddd;
                    border-radius: 8px;
                    padding: 10px 0;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                    z-index: 1000;
                    width: 150px;
                `;
                
                // 添加语言选项
                languages.forEach(lang => {
                    const option = document.createElement('div');
                    option.className = 'language-option';
                    option.textContent = lang.name;
                    option.dataset.code = lang.code;
                    
                    // 高亮当前选中的语言
                    if (lang.code === currentLang) {
                        option.style.backgroundColor = currentTheme === 'dark' ? '#555' : '#f0f0f0';
                        option.style.fontWeight = 'bold';
                    }
                    
                    // 设置选项样式
                    option.style.cssText += `
                        padding: 10px 15px;
                        cursor: pointer;
                        color: ${currentTheme === 'dark' ? '#fff' : '#333'};
                        transition: background-color 0.2s;
                    `;
                    
                    // 添加点击事件
                    option.addEventListener('click', () => {
                        selectLanguage(lang.code);
                        // 关闭菜单
                        document.body.removeChild(languageMenu);
                        languageMenu = null;
                    });
                    
                    option.addEventListener('mouseenter', () => {
                        if (lang.code !== currentLang) {
                            option.style.backgroundColor = currentTheme === 'dark' ? '#444' : '#f5f5f5';
                        }
                    });
                    
                    option.addEventListener('mouseleave', () => {
                        if (lang.code !== currentLang) {
                            option.style.backgroundColor = 'transparent';
                        }
                    });
                    
                    languageMenu.appendChild(option);
                });
                
                // 添加到页面
                document.body.appendChild(languageMenu);
                
                // 点击其他地方关闭菜单
                const closeMenu = (e) => {
                    if (languageMenu && !languageMenu.contains(e.target) && e.target !== languageToggle && !languageToggle.contains(e.target)) {
                        document.body.removeChild(languageMenu);
                        languageMenu = null;
                        document.removeEventListener('click', closeMenu);
                    }
                };
                
                document.addEventListener('click', closeMenu);
            };
            
            // 选择语言
            const selectLanguage = (langCode) => {
                currentLang = langCode;
                
                // 更新当前语言显示
                const selectedLang = languages.find(lang => lang.code === langCode);
                if (selectedLang && currentLanguage) {
                    currentLanguage.textContent = selectedLang.name;
                    console.log(selectedLang.name);
                }
                
                // 使用SDK发送语言变更
                window.frameSDK.changeLanguage(langCode);
            };
            
            // 语言切换按钮点击事件
            languageToggle.addEventListener('click', (e) => {
                e.stopPropagation(); // 防止触发关闭菜单的事件
                showLanguageMenu();
            });
            
            // 初始化当前语言显示
            const selectedLang = languages.find(lang => lang.code === currentLang);
            if (selectedLang && currentLanguage) {
                currentLanguage.textContent = selectedLang.name;
            }
            
            // 更新页面标题的函数
            function updatePageTitle() {
                if (window.i18n && window.frameSDK) {
                    const title = window.i18n.t('mine.title');
                    window.frameSDK.updateTitle(title);
                    document.title = title + ' - VR-IoT';
                    console.log('mine页面标题已更新:', title);
                }
            }
            
            if (window.i18n) {
                i18n.updateAllElements();
                // 初始化设置页面标题
                updatePageTitle();
            }
            
            // 监听语言变更事件，更新语言按钮文本和页面标题
            window.addEventListener('languageChanged', (event) => {
                console.log('mine页面检测到语言变更事件');
                const langCode = event.detail.language || currentLang;
                const selectedLang = languages.find(lang => lang.code === langCode);
                if (selectedLang && currentLanguage) {
                    currentLanguage.textContent = selectedLang.name;
                    console.log('当前语言更新为:', selectedLang.name);
                }
                // 更新页面标题和UI元素
                if (window.i18n) {
                    updatePageTitle();
                    window.i18n.updateAllElements();
                }
            });
            
            // 确保主框架语言变更时也能更新
            if (window.frameSDK) {
                // 监听SETTINGS_UPDATE消息
                window.frameSDK.on('SETTINGS_UPDATE', (settings) => {
                    if (settings.language && settings.language !== currentLang) {
                        console.log('mine页面接收到SETTINGS_UPDATE消息，语言变更为:', settings.language);
                        currentLang = settings.language;
                        // 当收到设置更新时，i18n.setLanguage已经被调用，languageChanged事件会被触发
                        // 语言按钮文本更新会在languageChanged事件监听器中处理
                    }
                });
            }
            
            // 监听页面切换时的标题刷新请求
            window.addEventListener('message', (event) => {
                if (event.data && event.data.type === 'REFRESH_TITLE') {
                    console.log('接收到标题刷新请求');
                    updatePageTitle();
                }
            });
            
            // 如果预加载设置已经应用，立即更新UI元素
            if (preloadSettings && window.i18n) {
                window.i18n.updateAllElements();
                updatePageTitle();
            }
        });
    </script>
</body>
</html>